<template>
  <div class="question-component">
    <div class="answer-view">
      <div class="content-wrapper">
        <!-- <div class="left-content" v-if="examStore.currQuestion.materials">
          <div class="content-box" v-html="examStore.currQuestion.materials"></div>
        </div> -->
        <!-- <MaterialORnot /> -->
        <div class="left-content">
          <div class="content-box">
            <span
              v-for="(material, ind) in materials"
              :class="{ active: selectInd == ind }"
              @click="clickTab(ind)"
              >{{ material }}
            </span>
          </div>
        </div>

        <div class="right-box-list">
          <!-- <askStatus :is-analysis="true" :is-correct="true" /> -->
          <!-- 题目内容 -->
          <div class="tips">选择文中描述这个问题的答案</div>
          <div class="answ" style="margin-top: 10px">{{ materials[selectInd] }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, computed, onMounted, watch } from "vue";
import askStatus from "./askStatus.vue";
import { changeHTML } from "@/utils/index";
import MaterialORnot from "./materialORnot.vue";
import { useExam } from "@/stores/exam.js";
const examStore = useExam();

const selectInd = ref(null);
const materials = computed(() => {
  let text = examStore.currQuestion.titleList[0].title
    .replace(/<[^>]*>/g, "")
    .endsWith(".")
    ? examStore.currQuestion.titleList[0].title.replace(/<[^>]*>/g, "")
    : examStore.currQuestion.titleList[0].title.replace(/<[^>]*>/g, "") + ".";
  // return examStore.currQuestion.titleList[0].title.replace(/<[^>]*>/g, "").split(".");
  return text.split(/(?<=\.)/).filter(Boolean);
});

const clickTab = (ind) => {
  selectInd.value = ind;
  examStore.currQuestion.answer_content = materials.value[ind].slice(
    0,
    materials.value[ind].length - 1
  );
  examStore.currQuestion.is_right = examStore.examInfo.section[
    examStore.currQuestion.sectionIndex
  ].question[examStore.currQuestion.index].is_right =
    materials.value[ind].slice(0, materials.value[ind].length - 1) ==
    examStore.currQuestion.solution
      ? 1
      : 0;
};
</script>
<style scoped lang="scss">
.question-component {
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
}

.answer-view {
  width: 100%;
}
.content-wrapper {
  display: flex;
  .left-content,
  .right-box-list {
    flex: 1;
    min-height: 300px;
  }

  .left-content {
    padding-right: 10px;
    border-right: 1px solid #ccc;
    margin-right: 10px;
    min-height: 100%;

    span {
      padding: 2px 3px;
      cursor: pointer;
    }

    span:hover {
      background-color: rgba(42, 89, 137.5, 0.1);
    }

    span.active {
      background-color: rgb(102.2, 177.4, 255, 0.5);
    }
  }
}

// Radio group styles
.radio-group {
  display: block;

  &.radio-group-disabled {
    // opacity: 0.6;
    pointer-events: none;
  }
}

.option-item {
  display: flex;
  align-items: center;
  // margin: 12px 0;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background-color: #f5f7fa;
  }

  &.radio-correct {
    .radio-boxs {
      border-color: #1e8fda;
    }

    .radio-icon {
      border-color: #1e8fda;
      background-color: #1e8fda;
    }
  }

  &.radio-wrong {
    .radio-boxs {
      border-color: #e52121;
    }

    .radio-icon {
      border-color: #e52121;
      background-color: #e52121;
    }
  }

  &.radio-ask {
    .radio-boxs {
      border-color: #126983;
    }

    .radio-icon {
      border-color: #126983;
      background-color: #126983;
    }
  }

  &.radio-selected {
    .radio-boxs {
      border-color: rgba(30, 143, 218, 0.4);
    }

    .radio-icon {
      border-color: rgba(30, 143, 218, 0.4);
      background-color: rgba(30, 143, 218, 0.4);
    }
  }
}

.radio-boxs {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #cccccc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  flex-shrink: 0;

  .radio-icon {
    width: 16px;
    display: block;
    height: 16px;
    // margin-right: 8px;
    border: 2px solid #ffff;
    border-radius: 50%;
    transition: all 0.3s;
  }
}

.radio-label {
  font-size: 14px;
}

.question-title {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.5;
}

.question-type {
  font-weight: bold;
  color: #333;
}

.quesition-list {
  display: flex;
}
</style>
